<template>
  <div class="box">
    <div class="error">404 找不到页面~~</div>
    <div class="back"><a @click="back">返回首页</a></div>
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.replace({ path: "/" });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../style/variable.less";
.box {
  .error {
    font-family: logotext;
    width: 200px;
    text-align: center;
    margin: 100px auto;
  }
  .back {
    text-align: center;
    a {
      margin: 0 auto;
      color: #baa6f2;
      font-weight: bolder;
      font-size: 30px;
      font-family: logotext;
      &:focus {
        background-color: #e2dcf1;
        color: #fff;
      }
    }
  }
}
</style>